<template>
  <div class="background">
    <div class="leftBodyBlank"></div>
    <div class="tBody">
      <div class="topBody" align="left">
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          style="line-height: 16px; font-size: 16px"
        >
          <el-breadcrumb-item :to="{ path: '/Home/Index' }" style=""
            ><img
              style="width: 20px; height: 20px; margin-top: -4px"
              src="../assets/images/homepage_24.png"
          /></el-breadcrumb-item>
          <el-breadcrumb-item>论坛</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="leftBody">
        <div class="hot">
          <div class="ltitle">
            <div style="float: left; width: 660px">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热帖榜&nbsp;&nbsp;&nbsp;&nbsp;<font
                style="font-style: italic"
                >TOP 10
              </font>
            </div>
            <div
              align="center"
              style="float: left; width: 80px; color: #6699cc"
            >
              <router-link
                :to="{ path: '/Home/GoodTopic', query: { goodType: 1 } }"
                >More&gt;&gt;</router-link
              >
            </div>
          </div>
          <div class="hotContent" style="width: 740px; height: 345px">
            <IndexHotTopic />
          </div>
        </div>
        <div class="fresh">
          <div class="ltitle">
            <div style="float: left; width: 660px">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新帖榜&nbsp;&nbsp;&nbsp;&nbsp;<font
                style="font-style: italic"
                >TOP 10
              </font>
            </div>
            <div align="center" style="float: left; width: 80px">
              <a href="topic_getAllTopic.action">More&gt;&gt;</a>
            </div>
          </div>
          <div class="freshContent" style="width: 740px; height: 345px">
            <IndexNewTopic />
          </div>
        </div>
        <div class="classics">
          <div class="ltitle">
            <div style="float: left; width: 660px">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;精帖榜&nbsp;&nbsp;&nbsp;&nbsp;<font
                style="font-style: italic"
                >TOP 10
              </font>
            </div>
            <div
              align="center"
              style="float: left; width: 80px; color: #6699cc"
            >
              <router-link
                :to="{ path: '/Home/GoodTopic', query: { goodType: 0 } }"
                >More&gt;&gt;</router-link
              >
            </div>
          </div>
          <div class="classicsContent" style="width: 740px; height: 345px">
            <IndexNiceTopic />
          </div>
        </div>
      </div>
      <div class="rightBody">
        <div class="announces">
          <div class="rtitle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;论坛公告</div>
          <div class="announcesContent">
            <IndexAnno />
          </div>
        </div>
        <div class="newButton">
          <div><router-link to="/Home/NewTopic">我要发帖</router-link></div>
        </div>
        <!-- <div class="hero">
                <div class="rtitle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;论坛牛人
                </div>
                <div class="announcesContent"></div>
            </div> -->
        <div class="helps">
          <div class="rtitle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;论坛帮助</div>
          <div class="announcesContent">
            <IndexHelp />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Top from "../components/Top.vue";
import Footer from "../components/Footer.vue";
import IndexHotTopic from "../components/IndexHotTopic";
import IndexNewTopic from "../components/IndexNewTopic";
import IndexNiceTopic from "../components/IndexNiceTopic";
import IndexAnno from "../components/IndexAnno";
import IndexHelp from "../components/IndexHelp";
export default {
  components: {
    IndexHotTopic,
    IndexNewTopic,
    IndexNiceTopic,
    IndexAnno,
    IndexHelp,
  },

  mounted() {
    // console.log(sessionStorage.getItem("user"));
  },
};
</script>

<style scoped>
@import "../assets/css/index.css";
body,
html {
  width: 1004px;
  padding: 0px;
  margin: 0px auto; /*设置居中  */
  text-align: center; /*兼容性更好  */
  border: none;
}

.btn {
  border: none;
  border-radius: 0;
  min-width: 80px;
  height: 28px;
  line-height: 16px;
  color: #fff;
}

.btn-top {
  width: 40px;
  height: 40px;
  background-color: #ccc;
}

.btn-top:hover,
.btn-top:focus {
  background-color: #676767;
}

.btn-top .glyphicon-chevron-up .glyphicon-share-alt {
  font-size: 18px;
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

.glyphicon-share-alt:before {
  content: "回复";
}

.glyphicon-chevron-up:before {
  content: "顶部";
}
</style>